<template>
    <el-row>
        <el-col :span="24">
            <div class="grid-content bg-purple-dark"><h4 style="line-height:36px;">订单管理</h4></div>
        </el-col>
        <el-col :span="24">
            <div class="padding-content table-con">
                <div style="display: flex;justify-content:space-between">
                    <div class="date">
                        <el-date-picker
                            v-model="searchInfo.start_date"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="开始日期"
                            style="margin-right:10px;"
                            :picker-options="options">
                        </el-date-picker>
                        <el-date-picker
                            v-model="searchInfo.end_date"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="结束日期"
                            style="margin-right:10px;"
                            :picker-options="options">
                        </el-date-picker>
                        <el-input v-model="searchInfo.goods_name" placeholder="请输入商品名称" style="width:200px"></el-input>
                        <el-button type="primary" size="small" @click="search" style="margin-left:25px;" :disabled="disabled">查询</el-button>
                    </div>
                    <div class="select">
                        <el-select v-model="type" placeholder="请选择" @change="searchType">
                            <el-option
                                v-for="item in type_select"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                </div>
            </div>
            <div class="table">
                <el-table
                    :data="order_info"
                    border
                    style="width: 100%"
                >
                    <!-- <el-table-column
                        prop="id"
                        label="订单Id">
                    </el-table-column> -->
                    <el-table-column
                        prop="order_no"
                        label="订单号">
                    </el-table-column>
                    <el-table-column
                        width="150px;"
                        label="支付时间">
                        <template slot-scope="scope">
                            <p style="text-align:center">{{scope.row.pay_time ? scope.row.pay_time :'-'}}</p>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="订单类型">
                        <template slot-scope="scope">
                            <span :class="{blue:scope.row.order_type == 0,danger:scope.row.order_type != 0}" >{{scope.row.order_type == 0 ? '上门取货' :'送货上门'}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        width="200px;"
                        label="商品名称">
                        <template slot-scope="scope">
                            <div class="name">
                                <p v-for="(item,index) in scope.row.goods_name" :key="index">{{item}}</p>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="规格">
                        <template slot-scope="scope">
                            <div>
                                <p v-for="(item,index) in scope.row.spec" :key="index">{{item}}</p>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="数量">
                        <template slot-scope="scope">
                            <div>
                                <p v-for="(item,index) in scope.row.num" :key="index">{{item}}</p>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="收货地址">
                        <template slot-scope="scope">
                            <p style="text-align:center">{{scope.row.address?scope.row.address:'-'}}</p>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="联系人">
                        <template slot-scope="scope">
                            <p style="text-align:center">{{scope.row.consignee?scope.row.consignee:'-'}}</p>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="联系电话">
                        <template slot-scope="scope">
                            <p style="text-align:center">{{scope.row.phone?scope.row.phone:'-'}}</p>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="备注">
                        <template slot-scope="scope">
                            <span>{{scope.row.remark?scope.row.remark:'-'}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="状态">
                        <template slot-scope="scope">
                            <span :class="{finish:scope.row.state == '5',pay:scope.row.state == '2'||scope.row.state == '3'}">{{orderStatus(scope.row.state)}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        align="center"
                        label="操作">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" v-if="scope.row.state == '2'" @click="getSendOrderId(scope.row.id)">发货</el-button>
                            <el-button type="text" size="small" v-else-if="scope.row.state == '3'" @click="extract(scope.row.id)">提货</el-button>
                            <p v-else style="text-align:center">-</p>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <el-pagination layout="prev, pager, next" :total="total" :page-size="page_size" @current-change="handleCurrentChange" :current-page="page">
            </el-pagination>
        </el-col>
        <el-dialog
            title="请输入快递单号"
            :visible.sync="dialogVisible"
            width="30%">
            <el-form :model="logistics" label-width="100px" ref="ruleForm" :rules="rules">
                <el-form-item label="快递公司：" prop="logistics">
                    <el-input v-model="logistics.logistics" placeholder="请输入快递公司" style="width:60%;'"></el-input>
                </el-form-item>
                <el-form-item label="运单号：" prop="logistics_no">
                    <el-input v-model="logistics.logistics_no" placeholder="请输入快递单号" style="width:80%;'"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="sendOutGoods('ruleForm')">确 定</el-button>
            </span>
        </el-dialog>
    </el-row>
</template>
<script>
export default {
    data(){
        return{
            order_info:[],
            searchInfo:{
                start_date:undefined,
                end_date:undefined,
                goods_name:undefined,
            },
            type:'',
            type_select:[
                {
                    value:'',
                    label:'全部订单'
                },
                {
                    value:'2',
                    label:'已支付,等待发货'
                },
                {
                    value:'3',
                    label:'已支付,等待上门取货'
                },
                {
                    value:'4',
                    label:'配送中'
                },
                {
                    value:'5',
                    label:'已完成'
                }
            ],
            page:1,
            page_size:10,
            dialogVisible:false,
            logistics:{
                order_id:'',
                logistics:'',
                logistics_no:''
            },
            rules:{
                logistics:[
                    {required: true, message: '请输入快递公司', trigger: 'blur'}
                ],
                logistics_no:[
                    {required: true, message: '请输入快递单号', trigger: 'blur'}
                ]
            },
            // 只能选择今天和今天之前的
            options:{
                disabledDate(time) {
                    return time.getTime() > Date.now() - 8.64e6
                }
            },
            total:10,
            order_type:'',
            isSearch:false
        }
    },
    computed:{
        disabled(){
            let searchInfo = this.searchInfo
            if(searchInfo.start_date || searchInfo.end_date || searchInfo.goods_name){
                return false
            }else{
                return true
            }
        }
    },
    watch:{
        disabled(newVal,oldVal){
            // 当搜索框为空时就发起请求所有数据的请求
            if(newVal){
                this.page = 1
                this.isSearch = false
                this.getOrderInfo()
            }
        }
    },  
    methods:{
        // 获取所有订单
        getOrderInfo(){
            this.$http.get(this.apiObj.order,{
                page:this.page,
                page_size:this.page_size,
                type:this.order_type
            }).then(data=>{
                if(data.status == 200){
                    this.total = data.content.order_num
                    this.order_info = data.content.order_info
                }
            })
        },
        //  获取搜索订单
        getSearchInfo(){
            Object.assign(this.searchInfo,{page:this.page,page_size:this.page_size,})
            console.log(this.searchInfo)
            this.$http.post(this.apiObj.search,this.searchInfo).then(data=>{
                if(data.status == 200){
                    this.order_info = data.content.order_info
                    this.total = data.content.order_num
                }
            })
        },
        handleCurrentChange(page){
            console.log(page)
            this.page = page
            // 判断是搜索订单分页还是全部订单分页
            if(!this.isSearch){
                this.getOrderInfo()
            }else{
                this.getSearchInfo()
            }
        },
        orderStatus(value){
            for(let i of this.type_select){
                if(value == i.value){
                    return i.label
                }
            }
        },
        // 点击发货获取订单Id
        getSendOrderId(id){
            // console.log(id)
            this.dialogVisible = true
            this.logistics.order_id = id
        },
        // 发货
        sendOutGoods(formName){
            console.log(this.logistics)
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$http.post(this.apiObj.order,this.logistics).then(data=>{
                        if(data.status == 200){
                            this.getOrderInfo()
                            this.dialogVisible = false
                            this.$message.success(`${data.content.msg}`)
                        }
                    })
                } else {
                    this.$message.error('信息填写有误')
                    return false;
                }
            });
        },
        // 查询
        search(){
            this.isSearch = true
            var starttime = new Date(Date.parse(this.searchInfo.start_date));
            var endtime = new Date(Date.parse(this.searchInfo.end_date));
            if( endtime<starttime && this.searchInfo.start_date && this.searchInfo.end_date){
                this.$message.warning('结束日期不能小于开始日期')
                return false
            }else{
                this.getSearchInfo()
            }
        },
        searchType(value){
            this.order_type = value
            this.getOrderInfo()
        },
        // 提货
        extract(id){
            console.log(id)
            this.$confirm("是否确认顾客已上门提货?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(()=>{
                this.$http.put(this.apiObj.order,{
                    order_id:id
                }).then(data=>{
                    if(data.status == 200){
                        this.$message.success(`${data.content.msg}`);
                        this.getOrderInfo()
                    }else{
                        this.$message.error(`${data.content.msg}`);
                    }
                })
            })
            .catch(() => {
            this.$message({
                    type: "info",
                    message: "已取消"
                });
            });
        }
    },
    mounted(){
        this.getOrderInfo()
    }
}
</script>
<style lang="scss" scoped>
// .table-con{
//     /deep/ 
// }
</style>


